<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <title>Unidu rezervacija</title>				
    	<link rel="stylesheet" href="../styles/style-raspored.css" />
</head>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

	<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>	
	<script src="codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_agenda_view.js" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_active_links.js" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_cookie.js" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_key_nav.js" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_pdf.js" type="text/javascript" charset="utf-8"></script>
	
 	<script src="codebase/ext/dhtmlxscheduler_map_view.js" type="text/javascript" charset="utf-8"></script>
 	<script src='codebase/ext/dhtmlxscheduler_tooltip.js' type="text/javascript" charset="utf-8"></script>
 	<script src="codebase/ext/dhtmlxscheduler_week_agenda.js" type="text/javascript" charset="utf-8"></script>
 	<script src="codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
 	<script src="codebase/ext/dhtmlxscheduler_expand.js" type="text/javascript" charset="utf-8"></script>

	
	<link rel="stylesheet" href="codebase/dhtmlxscheduler_glossy.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
	<script src=codebase/ext/dhtmlxscheduler_readonly.js" type="text/javascript" charset="utf-8"></script>

  <!-- učitaj hrvatsku lokalizaciju -->
  <script src="sources/locale_hr.js" type="text/javascript" charset="utf-8"></script>
	
<style type="text/css" media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
	}	
	
	.dhx_cal_event_cont_selected{
		background-color: #9cc1db;
		color: white;
	}
	.dhx_scale_hour_main {
		float: left;
		text-align: right;
		font-size: 16px;
		font-weight: bold;
	}
	.dhx_scale_hour_minute_cont {
		float: left;
		position: relative;
		text-align: right;
	}
	.dhx_scale_hour_minute_top, .dhx_scale_hour_minute_bottom {
		font-size: 10px;
		padding-right: 5px;
	}
	.dhx_scale_hour_sep {
		position: absolute;
		height: 1px;
		background-color: #8C929A;
		right: 0;
		top: 20px;
		width: 20px;
	}
	
	.one_line{
		white-space:nowrap;
		overflow:hidden;
		padding-top:5px; padding-left:5px;
		text-align:left !important;
	}	
	
  /* događaj u dnevnom ili tjednom pregledu */
	.dhx_cal_event.nedodijeljen_vozac div{
		background-color:red !important; 
		color:white !important;
	}
    /* višednevni događaj u mjesečnom pregledu */
	.dhx_cal_event_line.nedodijeljen_vozac{
		background-color:red !important; 
		color:white !important;
	}
    /* događaj sa fiksiranim vremenom u mjesečnom pregledu */
	.dhx_cal_event_clear.nedodijeljen_vozac{
	  background-color:red !important; 
		color:white !important;
	}	
	
</style>

<script type="text/javascript" charset="utf-8">
	function init() {
	  
	  // tooltip tekst - TODO? - lokacija, vozač i vozilo?
    var format=scheduler.date.date_to_str("%Y-%m-%d %H:%i"); 
    scheduler.templates.tooltip_text = function(start,end,event) {
    	return "<b>Događaj:</b> "+event.text+"<br/><b>Početak:</b> "+format(start)+"<br/><b>Završetak:</b> "+format(end);
    };	  
	  
		scheduler.config.multi_day = true;
		
		// format podataka kojeg loadamo iz MySQL baze
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.api_date="%Y-%m-%d %H:%i";
		scheduler.config.prevent_cache = true;
		
		var niz_vozaca = scheduler.serverList("popis_vozaca");
		scheduler.locale.labels.vozaci_tab = "Vozači";
		
		var niz_vozila = scheduler.serverList("popis_vozila");
		scheduler.locale.labels.vozila_tab = "Vozila";	
		
		scheduler.xy.map_date_width = 180;              // širina stupca za datum
		scheduler.xy.map_description_width = 400;       // širina stupca za opis događaja

		// sekcije za lightbox - vidi dogadjaji.php
		scheduler.config.lightbox.sections=[	
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"vozac", height:21, map_to:"vozac_id", type:"select", options:niz_vozaca},			
			{name:"vozilo", height:21, map_to:"vozilo_id", type:"select", options:niz_vozila},			
			{name:"location", height:43, type:"textarea", map_to:"event_location" },
			{name:"time", height:72, type:"time", map_to:"auto"}
		]		
		
		scheduler.config.map_inital_zoom = 8;
		scheduler.config.map_resolve_event_location = true;
		scheduler.config.map_initial_position = new google.maps.LatLng(42.64190079999999, 18.10648489999994);
		scheduler.config.map_error_position = new google.maps.LatLng(42.64190079999999, 18.10648489999994);
		scheduler.config.map_resolve_user_location = true;
		
		// kreiramo dva unit view-a, po vozačima i po vozilima
		scheduler.createUnitsView({
			name:"vozaci",
			property:"vozac_id",
			list:niz_vozaca
		});
		
		scheduler.createUnitsView({
			name:"vozila",
			property:"vozilo_id",
			list:niz_vozila
		});		
		
		scheduler.locale.labels.week_agenda_tab = "Tjedna agenda";

		// prijevodi sekcija u lightbox-u
		
		scheduler.locale.labels.section_vozac="Vozač";		
		scheduler.locale.labels.section_vozilo="Vozilo";
		
		// Google map lokalizacije stringova
	  scheduler.locale.labels.map_tab = "Zemljovid";
    scheduler.locale.labels.section_location="Lokacija";
    scheduler.locale.labels.marker_geo_success = "Vi se nalazite ovdje.";
    scheduler.locale.labels.marker_geo_fail = "Nažalost ne mogu odrediti gdje ste koristeći geolokaciju."; 
				 
		scheduler.config.details_on_dblclick=true;
		scheduler.config.details_on_create=true;
		
		// novi događaj stvoren na dvoklik po defaultu traje 60 minuta
		scheduler.config.event_duration = 60;
		scheduler.config.auto_end_date = true;				
		
		scheduler.config.full_day = true; // omogući parametar koji aktivira opciju za cjelodnevne događaje
		
		// prilikom spremanja provjeravamo je li nešto uneseno - ne smije biti prazan string
		scheduler.attachEvent("onEventSave",function(id,data){
			if (!data.text) {
				alert("Opis ne smije biti prazan!");
				return false;
			}
			return true;
		})		
		
      scheduler.templates.event_class=function(start,end,event){
          if (event.vozac_id == 1) 
                return "nedodijeljen_vozac"; 
      }		
		
    scheduler.templates.hour_scale = function(date){
            var hour = date.getHours();
            var top = '00';
            var bottom = '30';
            if(hour==0)
                top = 'AM';
            if(hour==12)
                top = 'PM';
            //hour =  ((date.getHours()+11)%12)+1;
            hour =  date.getHours();
            var html = '';
            var section_width = Math.floor(scheduler.xy.scale_width/2);
            var minute_height = Math.floor(scheduler.config.hour_size_px/2);
            html += "<div class='dhx_scale_hour_main' style='width: "+section_width+"px; height:"+(minute_height*2)+"px;'>"+hour+"</div><div class='dhx_scale_hour_minute_cont' style='width: "+section_width+"px;'>";
            html += "<div class='dhx_scale_hour_minute_top' style='height:"+minute_height+"px; line-height:"+minute_height+"px;'>"+top+"</div><div class='dhx_scale_hour_minute_bottom' style='height:"+minute_height+"px; line-height:"+minute_height+"px;'>"+bottom+"</div>";
            html += "<div class='dhx_scale_hour_sep'></div></div>";
            return html;		
		};
		
		scheduler.init('scheduler_here',null,"month");
		
		// blokiramo uređivanje događaja koji su se završili prije tjedan dana
	  function block_readonly(id){
	    var danas = new Date();
      var milisekundi_u_7_dana = 7 * 24 * 60 * 60 * 1000;
      var prije_7_dana = new Date(danas - milisekundi_u_7_dana);
      

      if (scheduler.getState().new_event)
      {
        // kreiramo novi događaj! onemogućujemo do 7 dana u prošlost
        if (scheduler.getState().date < prije_7_dana)
          return false;
      }
      
      if (this.getEvent(id).end_date < prije_7_dana)
      {
        scheduler.getEvent(id).readonly = true;
        return false;
      }
      else {
        scheduler.getEvent(id).readonly = false;
        return true;        
      }
		}
		
		// zasad otkomentirano - ako treba zabraniti uređivanje događaja u proizvoljno dubokoj prošlosti, tada otkomentirati!
		//scheduler.attachEvent("onBeforeDrag",block_readonly)
		//scheduler.attachEvent("onClick",block_readonly)
		
	  scheduler.templates.lightbox_header = function(start, end, event){
			return "Detalji za "+event.text;
		}
//		
//		scheduler.templates.week_agenda_event_text = function(start_date, end_date, event, date, position) {
//				switch(position){
//					case "middle":
//						return "-- " + event.text;
//					case "end":
//						return "End: "+scheduler.templates.event_date(start_date) + " " + event.text;
//					case "start":
//						return "Start: "+scheduler.templates.event_date(start_date) + " " + event.text;
//					default:
//						return scheduler.templates.event_date(start_date) + " " + event.text;
//				}
//			};
		
		scheduler.setLoadMode("month")
		scheduler.load("php/dogadjaji.php");
		
		var dp = new dataProcessor("php/dogadjaji.php");
		dp.init(scheduler);		
		
	}

	
	function show_minical(){
		if (scheduler.isCalendarVisible())
			scheduler.destroyCalendar();
		else
			scheduler.renderCalendar({
				position:"dhx_minical_icon",
				date:scheduler._date,
				navigation:true,
				handler:function(date,calendar){
					scheduler.setCurrentView(date);
					scheduler.destroyCalendar()
				}
			});
	}
</script>

<!-- standardna inicijalizacija -->
<body onload="init();">
 		<div id="wrap">
        	
        	<div id="header">
            	
        		<a href="index.html" title="Unidu rezervacija"><h1>UNIDU REZERVACIJA</h1></a>       	
        		<h2>Web aplikacija za rezerviranje vozila</h2>           	

            	<div id="nav">
            	
                	<ul id="nav-pages"> 
                	                	     	
						<li><a href="../index.html">Početna</a><span>/</span></li>
						<li><a href="../FormaGridVozaci/form-grid.html">Vozači</a><span>/</span></li>
						<li><a href="../FormaGridVozila/form-grid.html">Vozila</a><span>/</span></li>
						<li><a href="raspored.html" class="current">Raspored</a><span>/</span></li>
						<li><a href="../Dokumentacija">Dokumentacija</a></li>	
										
            		</ul><!--end nav-pages-->
            		
            	</div><!--end nav-->

            </div><!--end header-->
            
            
            
            
  
  
	<div id="scheduler_here" class="dhx_cal_container" style='width:960px; height:600px;' align="center">
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			 <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>
			 <input type="button" name="print" value="PDF " onclick="scheduler.toPDF('pdfgen/generate.php')" style='position:absolute; right:20px; top:-2px;'>			
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
      <div class="dhx_cal_tab" name="year_tab" style="right:270px;"></div>	
      <div class="dhx_cal_tab" name="map_tab" style="right:340px;"></div>       
      <div class="dhx_cal_tab" name="vozaci_tab" style="right:420px;"></div>		
      <div class="dhx_cal_tab" name="vozila_tab" style="right:485px;"></div>
      <div class="dhx_cal_tab" name="agenda_tab" style="right:550px;"></div>
      <div class="dhx_cal_tab" name="week_agenda_tab" style="right:650px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>
	</div>
	
	
	
	
	
   		<div id="footer">
				
				<p class="copyright">Copyright &copy; 2012 &middot; UNIDU &middot; All Rights Reserved</p>
				
			</div><!--end footer-->
            
    	</div><!--end wrap-->	
	
	
	
</body>